<template>
  <ca-modal
    v-model="modalFlag"
    :mode="parentMode"
    :position="parentPosition"
    @change="changeModal"
  >
    <view
      class="ca-digital-keyboard"
      :class="'mode-' + mode"
    >
      <view
        class="dk-close"
        v-if="mode !== 1 && mode !== 4"
        @click="close()"
      >
        <icon
          type="clear"
          color="#333"
          :size="u50"
        ></icon>
      </view>
      <swiper
        class="dk-swiper"
        :current="current"
      >
        <swiper-item @touchmove.prevent.stop>
          <view class="dk-title">{{textInfo.title}}</view>
          <view class="dk-subtitle">{{textInfo.subTitle}}</view>
          <view
            class="pwd-box"
            @click="getKeyboard"
          >
            <view
              class="pwd-text"
              v-for="(item,index) in digits"
              :key="index"
              :data-index="index"
              :class="{active:(activeInput == index)}"
            >{{payPassWord[index]}}</view>
          </view>
        </swiper-item>
        <!-- 设置新安全密码 -->
        <block v-if="[2, 5].includes(mode)">
          <swiper-item @touchmove.prevent.stop>
            <view class="dk-title">{{textInfo.title}}</view>
            <view class="dk-subtitle">{{textInfo.twoSubTitle}}</view>
            <view
              class="pwd-box"
              @click="getKeyboard"
            >
              <view
                class="pwd-text"
                v-for="(item,index) in digits"
                :key="index"
                :data-index="index"
                :class="{active:(activeInput==index)}"
              >{{payPassWord[index]}}</view>
            </view>
          </swiper-item>
        </block>
        <!-- 修改安全密码 -->
        <block v-else-if="mode === 3">
          <swiper-item @touchmove.prevent.stop>
            <view class="dk-title">{{textInfo.twoTitle}}</view>
            <view class="dk-subtitle">{{textInfo.twoSubTitle}}</view>
            <view
              class="pwd-box"
              @click="getKeyboard"
            >
              <view
                class="pwd-text"
                v-for="(item,index) in digits"
                :key="index"
                :data-index="index"
                :class="{active:(activeInput==index)}"
              >{{payPassWord[index]}}</view>
            </view>
          </swiper-item>
          <swiper-item @touchmove.prevent.stop>
            <view class="dk-title">{{textInfo.threeTitle}}</view>
            <view class="dk-subtitle">{{textInfo.threeSubTitle}}</view>
            <view
              class="pwd-box"
              @click="getKeyboard"
            >
              <view
                class="pwd-text"
                v-for="(item,index) in digits"
                :key="index"
                :data-index="index"
                :class="{active:(activeInput==index)}"
              >{{payPassWord[index]}}</view>
            </view>
          </swiper-item>
        </block>
      </swiper>
      <block v-if="![1, 4].includes(mode)">
        <!-- <view class="pwd-tips">安全密码为6位数字，用于提现、设置密保、添加银行卡等操作，可保障资金安全</view> -->
        <view class="pwd-tips pwd-tips-errot">{{msgText}}</view>
      </block>
      <!-- <view
        v-if="showForget && mode === 1"
        class="pwd-forget"
        @click="forgetPwd"
      >
        <text>未设置安全密码,去设置>></text>
      </view> -->
      <view
        class="digital-keyboard"
        :class="{'is-show' : dkFlag || mode === 1 || mode === 4}"
      >
        <view
          class="dk-down"
          v-if="mode !== 1 && mode !== 4"
        >
          <block v-if="showPrevText">
            <view
              class="dk-submit dk-return"
              @click="changeSwiper(-1)"
            >{{$t('anquanzhifu.shuruanquan9')}}</view>
          </block>
          <view
            class="dk-down-icon"
            @click="changeKeyboard(!dkFlag)"
          ></view>
          <block v-if="trigger && !(mode === 2 && current === 0)">
            <view
              class="dk-submit"
              @click="submit(true)"
            >{{$t('anquanzhifu.shuruanquan10')}}</view>
          </block>
        </view>
        <view class="digital-key-box">
          <view
            class="num"
            v-for="item in digitalList"
            :key="item"
            :class="{'no-num' : ['', '-1'].includes(item)}"
            @click="getKeyNumber(item)"
          >{{item}}</view>
        </view>
      </view>
    </view>
  </ca-modal>
</template>

<script>
export default {
  name: 'CaPaymentPassword',
  data() {
    return {
      activeInput: 0,//当前输入的下标
      digitalList: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', '-1'],//键盘
      paymentPwd: '',//安全密码内容
      dkFlag: true,//安全密码键盘的显示与隐藏
      current: 0,
      paymentPwds: [],//上一次安全密码内容,历史安全密码,
      msgText: '',
      u50: uni.upx2px(50),
    };
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    digits: {
      type: Number,
      default: 6
    },
    // 仅在mode为1的时候生效
    showForget: {
      type: Boolean,
      default: true
    },
    /*
    *	可选值说明（这一个顺序最好不要改，跟当前步骤步进行有关系，自动提交要用到mode跟current的判断  是否要自动提交）
    *	1 安全密码校验（用于校验安全）
    *	2 设置安全密码（2步  输入=》确认输入）
    *	3 修改安全密码（3步 原安全密码=》输入=》确认输入）
    *	4 找回登录密码(同mode = 1一样，就怕后端校验接口不一样而额外添加的一个mode)
    *	5 重置安全密码
    */
    mode: {
      type: Number,
      default: 1
    },
    /*
    *	是否自动提交
    */
    trigger: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    modalFlag: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    },
    payPassWord() {
      var payPassWord = this.paymentPwd.split('') || [];
      payPassWord.fill('*');
      return payPassWord;
    },
    textInfo() {
      let arr = [
        {
          title: this.$t('anquanzhifu.shuruanquan'),
          subTitle: this.$t('anquanzhifu.shuruanquan1')
        },
        {
          title: this.$t('anquanzhifu.shuruanquan2'),
          subTitle: this.$t('anquanzhifu.shuruanquan3'),
          twoSubTitle: this.$t('anquanzhifu.shuruanquan4')
        },
        {
          title: this.$t('anquanzhifu.shuruanquan11'),
          twoTitle: this.$t('anquanzhifu.shuruanquan2'),
          threeTitle: this.$t('anquanzhifu.shuruanquan2'),
          subTitle: this.$t('anquanzhifu.shuruanquan12'),
          twoSubTitle: this.$t('anquanzhifu.shuruanquan13'),
          threeSubTitle: this.$t('anquanzhifu.shuruanquan4'),
        },
        {
          title: '输入安全密码',
          subTitle: '请输入安全密码'
        },
        {
          title: '重置安全密码',
          subTitle: '请输入安全密码',
          twoSubTitle: '请再次输入安全密码以确认'
        }
      ]
      return arr[this.mode - 1];
    },
    parentMode() {
      return this.mode === 1 || this.mode === 4 ? 'full' : 'cover';
    },
    parentPosition() {
      return this.mode === 1 || this.mode === 4 ? 'bottom' : 'middle';
    },
    showPrevText() {
      return this.current >= (this.mode - 1) || (this.mode === 5 && this.current > 0) ? true : false;
    }
  },
  methods: {
    // 模态框显示或者关闭的回调
    changeModal(e) {// 返回是一个Boolean值
      if (e) {
        this.current = 0;
        this.changeKeyboard();//默认拉起键盘
      } else {
        this.changeKeyboard(false);//默认拉起键盘
        this.clearAll();
        this.$emit('cancel');
      }
    },
    // 开关键盘
    changeKeyboard(flag = true) {
      this.dkFlag = flag;
      !flag && (this.activeInput = -1);
    },
    clear(time = 0) {
      setTimeout(() => {
        this.paymentPwd = '';
        this.activeInput = 0;
        this.paymentPwds.splice(this.current, 1);
      }, time)
    },
    clearAll() {
      this.paymentPwd = '';
      this.activeInput = 0;
      this.current = 0;
      this.showError()
      this.paymentPwds = [];
    },
    showError(msg) {
      if (!msg) return this.msgText = '';
      if (![1, 4].includes(this.mode)) {
        this.msgText = msg;
      } else {
        uni.showToast({
          title: msg
        })
      }
    },
    forgetPwd() {
		this.$tab.navigateTo('/pages/my/shezhi')
      // console.log('忘记密码跳转写这边')
    },
    close() {
      let tips = '';
      if (this.mode === 2) {
        tips = this.$t('anquanzhifu.shuruanquan5');
      } else if (this.mode === 5) {
        tips = '您是否要放弃重置安全密码';
      } else {
        tips = this.$t('anquanzhifu.shuruanquan14');
      }
      uni.showModal({
        title: this.$t('anquanzhifu.shuruanquan6'),
        content: tips,
        confirmText: this.$t('anquanzhifu.shuruanquan7'),
        cancelText: this.$t('anquanzhifu.shuruanquan8'),
        success: (res) => {
          if (!res.confirm) {
            this.modalFlag = false
          }
        }
      })
    },
    submit(clickFlag) {//clickFlag主动点击
      if (!this.trigger && !clickFlag) return;
      if (this.paymentPwd.length !== this.digits) {
        this.showError('请输入' + this.digits + '位安全密码');
      } else {
        switch (this.mode) {
          case 1:
            this.checkSafePwd();
            break;
          case 2:
            if (this.current === 0) {
              this.changeSwiper(1);
            } else {
              this.setSafePwd();
            }
            break;
          case 3:
            //校验安全密码正确性
            if (this.current === 0) {
              this.verifySafePwd();
            } else if (this.current === 1) {
              if (this.paymentPwd === this.paymentPwds[this.current - 1]) {
                this.showError('新密码不能与原密码一样');
                setTimeout(() => {
                  this.paymentPwd = '';
                  this.paymentPwds[this.current] = '';
                  this.activeInput = 0;
                }, 300)
              } else {
                this.changeSwiper(1);
              }
            } else {
              this.setSafePwd()
            }
            break;
          case 4:
            this.checkSafePwd();
            break;
          case 5:
            if (this.current === 0) {
              this.changeSwiper(1);
            } else {
              this.setSafePwd();
            }
            break;
          default:
            break;
        }
      }
    },
    // 提交安全密码设置
    setSafePwd() {
      if (this.paymentPwd !== this.paymentPwds[this.current - 1]) {
        this.showError('两次支付密码输入不一致');
        this.clear(300);
        return;
      }
      // 这边可以通过this.mode来区分不同请求  2  3  5 提交都会走这边
      // 模拟请求，把这个换成ajax请求哈，或者emit出去 外面去请求，但是建议都集成在这边 省的写一堆重置代码
	  if(this.mode==2||this.mode==3){
		  uni.hideLoading();
		  let data = {
		  	zf_pass:this.paymentPwd
		  }
		  let opts = {
		  	url: '/user/updatezfpass',
		  	method: 'POST'
		  };
		  // console.log('打印入参',data);
		  this.api.httpTokenRequest(opts, data).then(res => {
		  	// console.log('添加支付密码', res);
		  	if (res[1].data.state == 'success') {
				
		  		this.modalFlag = false;
				this.$modal.msg(res[1].data.msg)
		  
		  	}else{
				// 密码输入错误
				this.clear();
				this.showError(response.msg);
			}
		  
		  })
	  }
      // setTimeout(() => {
      //   uni.hideLoading();
      //   let response = {//模拟返回
      //     code: 1,
      //     msg: '设置密码正确'
      //   }
      //   // 密码输入正确,判断就看你们自己接口
      //   if (response.code === 1) {
      //     this.modalFlag = false;
      //     // 告知父组件
      //   } else {
      //     // 密码输入错误
      //     this.clear();
      //     this.showError(response.msg);
      //   }
      // }, 1000)
      // 这是把代码传出去，组件外做校验
      const emitTypes = { 2: 'setting', 3: 'modify', 5: 'resetting' }
      this.$emit('submit', { type: emitTypes[this.mode], value: this.paymentPwd })
    },
    // 校验密码对不对
    verifySafePwd() {
       uni.hideLoading();
	  let data = {
	  	zf_pass:this.paymentPwd
	  }
	  let opts = {
	  	url: '/user/yzzfpass',
	  	method: 'GET'
	  };
	  // console.log('打印入参',data);
	  this.api.httpTokenRequest(opts, data).then(res => {
	  	// console.log('验证支付密码', res);
	  	if (res[1].data.state == 'success') {
			
			this.$modal.msg(res[1].data.msg)
	  		//执行下一步
	  		this.changeSwiper(1);
			this.$emit('submit', {
			  type: 'true',
			});
	  
	  	}else{
	  	// 密码输入错误
	  	this.clear();
	  	this.showError(res[1].data.msg);
	  			}
	  
	  })
      //模拟请求，把这个换成ajax请求哈
      // setTimeout(() => {
      //   uni.hideLoading();
      //   let response = {//模拟返回
      //     code: 1,
      //     msg: '密码正确'
      //   }
      //   // 密码输入正确,判断就看你们自己接口
      //   if (response.code === 1) {
      //     // 密码输入正确
      //     //执行下一步
      //     this.changeSwiper(1);
      //   } else {
      //     // 密码输入错误
      //     this.clear();
      //     this.showError(response.msg);
      //   }
      // }, 1000)
    },
    // 一次性输入校验
    checkSafePwd() {
      uni.showLoading({
        title: '校验安全密码中'
      });
	  let data = {
	  	zf_pass:this.paymentPwd
	  }
	  let opts = {
	  	url: '/user/yzzfpass',
	  	method: 'GET'
	  };
	  // console.log('打印入参',data);
	  this.api.httpTokenRequest(opts, data).then(res => {
	  	// console.log('验证支付密码', res);
	  	if (res[1].data.state == 'success') {
			uni.hideLoading();
			this.$modal.msg(res[1].data.msg)
	  		//执行下一步
	  		this.modalFlag = false;
	  		// 告知父组件
	  		this.$emit('submit', {
	  		  type: 'true',
	  		});
			
	  
	  	}else{
			uni.hideLoading();
	  	// 密码输入错误
	  	this.clear();
	  	this.showError(res[1].data.msg);
	  			}
	  
	  })
      //模拟请求，把这个换成ajax请求哈
      // setTimeout(() => {
      //   uni.hideLoading();
      //   let response = {//模拟返回
      //     code: 1,
      //     msg: '密码正确'
      //   }
      //   // 密码输入正确,判断就看你们自己接口
      //   if (response.code === 1) {
      //     this.modalFlag = false;
      //     // 告知父组件
      //     this.$emit('submit', {
      //       type: 'check',
      //       value: this.paymentPwd
      //     });
      //   } else {
      //     // 密码输入错误
      //     this.clear();
      //     this.showError(response.msg);
      //   }
      // }, 1000)
    },
    changeSwiper(num) {
      this.current += num;
      this.paymentPwd = this.paymentPwds[this.current] || '';
      let activeInput = this.paymentPwd.length
      this.activeInput = activeInput - (activeInput >= this.digits ? 1 : 0);
    },
    getKeyNumber(val) {
      let paymentPwdArr = this.paymentPwd.split('');
      if (val === '' || (val != -1 && paymentPwdArr.length === this.digits)) { //空或者已经达到最大值
        if (paymentPwdArr.length === this.digits && this.trigger) {
          this.submit();
          return;
        }
        return false;
      } else if (val != -1) { //数字输入
        paymentPwdArr.splice(this.activeInput, 0, val);
        this.activeInput++;
        this.paymentPwd = paymentPwdArr.join('');
        this.paymentPwds[this.current] = this.paymentPwd;
        if (paymentPwdArr.length === this.digits && this.trigger) {
          this.submit();
          return;
        }
      } else { //删除
        if (this.activeInput >= 0) {
          this.activeInput !== 0 && this.activeInput--;
          paymentPwdArr.splice(this.activeInput, 1);
          this.paymentPwd = paymentPwdArr.join('');
          this.paymentPwds[this.current] = this.paymentPwd;
        }
      }
      this.showError();
    },
    getKeyboard(e) {
      let index = e && e.target.dataset.index;
      if (index === undefined) {
        this.activeInput = 0;
        this.changeKeyboard(false);
        return;
      }
      var _length = this.paymentPwd.length;
      this.activeInput = index <= _length ? index : _length;
      this.changeKeyboard();
    }
  }
}
</script>

<style>
/* 键盘 */
.ca-digital-keyboard {
  height: 100%;
  background-color: #fff;
  color: #000;
}
.ca-digital-keyboard.mode-1,
.ca-digital-keyboard.mode-4 {
  height: auto;
  border-radius: 40rpx 40rpx 0 0;
  background: #fff
    url()
    center top / 100% auto no-repeat;
  padding-bottom: 0px;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
.ca-digital-keyboard.mode-2,
.ca-digital-keyboard.mode-5,
.ca-digital-keyboard.mode-3 {
  padding-top: 180rpx;
}
.ca-digital-keyboard.mode-2 .dk-title,
.ca-digital-keyboard.mode-5 .dk-title,
.ca-digital-keyboard.mode-3 .dk-title {
  color: #000;
}
.ca-digital-keyboard.mode-2 .digital-keyboard,
.ca-digital-keyboard.mode-5 .digital-keyboard,
.ca-digital-keyboard.mode-3 .digital-keyboard {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  position: fixed;
  left: 0;
  bottom: 0;
}
.ca-digital-keyboard .dk-title {
  font-size: 36rpx;
  font-weight: 800;
  color: #fff;
  line-height: 90rpx;
  text-align: center;
}
.ca-digital-keyboard .dk-swiper {
  height: 260rpx;
}
.ca-digital-keyboard .dk-submit {
  position: absolute;
  right: 0;
  top: 0;
  padding: 0 20rpx;
  color: #38f;
  font-size: 28rpx;
  line-height: 70rpx;
}
.ca-digital-keyboard .dk-return {
  right: auto;
  left: 0;
}
.ca-digital-keyboard .dk-close {
  position: fixed;
  left: 30rpx;
  top: 30rpx;
}
.ca-digital-keyboard .dk-subtitle {
  font-size: 24rpx;
  color: #989894;
  line-height: 3;
  text-align: center;
}
.ca-digital-keyboard .dk-down {
  text-align: center;
  line-height: 70rpx;
  box-shadow: 0 0 0 1px #eee;
}
.ca-digital-keyboard .dk-down .dk-down-icon {
  border-left: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  width: 40rpx;
  height: 40rpx;
  display: inline-block;
  -webkit-transform: scale(0.5) rotate(-45deg);
  transform: scale(0.5) rotate(-45deg);
}
.ca-digital-keyboard .pwd-tips {
  color: #666;
  font-size: 24rpx;
  line-height: 1.5;
  padding: 14rpx 100rpx;
}
.ca-digital-keyboard .pwd-tips-errot {
  color: #ff4242;
  font-size: 30rpx;
  text-align: center;
}
.ca-digital-keyboard .pwd-forget {
  margin-top: 20rpx;
  font-size: 24rpx;
  color: #26c6b3;
  text-align: center;
  line-height: 32rpx;
}
.ca-digital-keyboard .digital-keyboard {
  margin-top: 30rpx;
  box-shadow: 0 -0.5px 0 1px #eee;
  width: 100%;
  transition: all 0.2s linear;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}
.ca-digital-keyboard .digital-key-box {
  box-shadow: 0 0 0 1px #eee;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.ca-digital-keyboard .digital-keyboard.is-show {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.ca-digital-keyboard .num {
  transition: all 0.2s linear;
  float: left;
  background-color: #fff;
  box-shadow: 0 0 0 1px #eee;
  width: 33.33333333%;
  cursor: pointer;
  text-align: center;
  color: #333;
  font-size: 54rpx;
  height: 92rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  position: relative;
  overflow: hidden;
}
.ca-digital-keyboard .num:after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(
    circle,
    rgba(0, 0, 0, 0.65) 20%,
    transparent 20%
  );
  background-repeat: no-repeat;
  background-position: 50%;
  -webkit-transform: scale(5);
  transform: scale(5);
  opacity: 0;
  transition: opacity 0.3s ease-in-out, -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, opacity 0.3s ease-in-out;
  transition: transform 0.2s ease-in-out, opacity 0.3s ease-in-out,
    -webkit-transform 0.2s ease-in-out;
}
.ca-digital-keyboard .num:active:after {
  -webkit-transform: scale(0);
  transform: scale(0);
  opacity: 0.5;
  transition: 0s;
}
.ca-digital-keyboard .num:nth-of-type(3n + 1) {
  border-bottom: 0;
  border-left: 0;
}
.ca-digital-keyboard .num:nth-of-type(3n + 2) {
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
}
.ca-digital-keyboard .num.no-num {
  background-color: #f2f2f2;
  font-size: 0;
}
.ca-digital-keyboard .num:last-child {
  background: #f2f2f2
    url()
    center center/auto 50rpx no-repeat;
}
.ca-digital-keyboard .pwd-box {
  padding-left: 10rpx;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ca-digital-keyboard .pwd-text {
  position: relative;
  vertical-align: middle;
  font-size: 50rpx;
  font-weight: bold;
  width: 92rpx;
  height: 92rpx;
  display: flex;
  justify-content: center;
  line-height: 2.2;
  box-shadow: 0 0 0 1px #ccc;
  overflow: hidden;
}
.ca-digital-keyboard .pwd-text + .pwd-text {
  margin-left: 10rpx;
}
.ca-digital-keyboard .pwd-text.active:after {
  -webkit-animation: twinkle 1s infinite;
  animation: twinkle 1s infinite;
  height: 70%;
  width: 4rpx;
  content: '';
  position: absolute;
  top: 15%;
  left: 50%;
  margin-left: -2rpx;
  background-color: #4fa5e1;
}
@-webkit-keyframes twinkle {
  from {
    background-color: #4fa5e1;
  }
  to {
    background-color: transparent;
  }
}
@keyframes twinkle {
  from {
    background-color: #4fa5e1;
  }
  to {
    background-color: transparent;
  }
}
</style>
